<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8">

                <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
                Remove this if you use the .htaccess -->
                <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

                <title>Who was the first president of the united states?</title>
                <meta name="description" content="">
                <meta name="author" content="nnimova">

                <meta name="viewport" content="width=device-width; initial-scale=1.0">

                <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
                <link rel="shortcut icon" href="/favicon.ico">
                <link rel="apple-touch-icon" href="/apple-touch-icon.png">
               
                <script src="http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js"></script>
                <script>
                        YUI().use('dd-delegate', 'dd-drop-plugin', function(Y) {
                            var del = new Y.DD.Delegate({
                                container: '#demo',
                                nodes: 'td'
                            });
                       
                            del.on('drag:end', function(e) {
                                del.get('currentNode').setStyles({
                                    top: 0,
                                    left: 0
                                });
                            });
                       
                            var drop = Y.one('#drop').plug(Y.Plugin.Drop);
                            drop.drop.on('drop:hit', function(e) {
                                if(e.drag.get('node').get('innerHTML') == 'George Washington')
                                        drop.set('innerHTML', '<strong>' + e.drag.get('node').get('innerHTML') + '</strong></br><span style="color:green">Correct!</span>');
                                else drop.set('innerHTML', '<strong>' + e.drag.get('node').get('innerHTML') + '</strong></br><span style="color:red">Try again</span>');
                            });
                        });
                </script>
                <style type="text/css">
                        #demo {
                            width: 200px;
                            position: relative;
                            left: 420px;
                        }
                        #demo table tr td {
                            border: 1px solid black;
                            background-color: #8DD5E7;
                            cursor: move;
                            margin: 3px;
                            list-style-type: none;
                            z-index: 2;
                            zoom: 1;
                        }
                        #play {
                                text-align: center;
                            position: relative;
                            zoom: 1;
                        }
                        #drop {
                            border: 1px solid black;
                            background-color: #eee;
                            height: 72px;
                            width: 200px;
                            position: absolute;
                            bottom: 5px;
                            right: 570px;
                            zoom: 1;
                        }
                        #drop strong {
                            font-weight: bold;
                        }
                        #drop.yui3-dd-drop-over {
                            background-color: #ccc;
                        }
                        body{
                                text-align:center;
                        }
                </style>
        </head>

        <body>
                <div>
                        <header>
                                <h1>Who was the first president of the united states?</h1>
                        </header>
                        <nav>
                                <p>
                                        <div id="play">

                                            <div id="demo">
                                                <table>
                                                    <tr><td>John Quincy Adams</td></tr>
                                                    <tr><td>George Washington</td></tr>
                                                    <tr><td>John Tyler</td></tr>
                                                </table>
                                            </div>
                                           
                                            <div id="drop">Drop on me</div>
                                        </div>
                                </p>
                        </nav>

                        <div>

                        </div>

                        <footer>
                                <p>
                                </p>
                        </footer>
                </div>
        </body>
</html>
